@keyframes zoomInDown {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes arrow {
  0% {
    transform: translateX(0);
  }
  11% {
    transform: translateX(4px);
  }
  21% {
    transform: translateX(-2px);
  }
  31% {
    transform: translateX(4px);
  }
  41% {
    transform: translateX(-2px);
  }
  51% {
    transform: translateX(0);
  }
}

.component-group {
  position: relative;
  padding: 10px;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 15px;
  justify-content: flex-start;
  max-width: 100%;
  &.over {
    padding-bottom: 30px;
    margin-bottom: 15px;
  }
  &.showAll {
    flex-wrap: wrap;
    .arrow {
      transform: translateX(-50%) rotate(-90deg) !important;
    }
    .arrowicon {
      animation: none;
    }
  }
  &.directionCol {
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
    ::ng-deep {
      > .ng-star-inserted,
      .citems {
        max-width: 100%;
      }
    }
  }
  .arrow {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(90deg);
    cursor: pointer;
    transition: all 0.3s;
  }
  .arrowicon {
    font-size: 18px;
    animation: arrow 3s ease-in-out infinite;
    color: #f38181;
  }
  ::ng-deep {
    > .ng-star-inserted {
      animation-duration: 0.5s;
      animation-fill-mode: both;
      animation-name: zoomInDown;
    }
    @for $i from 2 through 20 {
      > .ng-star-inserted:nth-child(#{$i}) {
        animation-delay: $i * 0.05s;
      }
    }
  }
}
